<template>
	<view>
		<view class="personalCard">
			<image src="../../static/my.png"></image>
			<view class="myInfo">
				<view class="class-title">
					{{params.className || ''}}
				</view>
				<view class="class-point">
					<view v-for="item in cardInfos" :key="item.name" class="point-item">
						<view class="point">
							{{item.value || ''}}
						</view>
						<view class="desc">
							{{item.name || ''}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			<text v-for="col in columns" :key="col.name" class="title-item">{{col.name}}</text>
		</view>
		<view class="list">
			<view class="list-item" v-for="(row, index) in data" :key="index" @click="toStuDetail(row)">
				<view class="text-item list-col" v-if="!col.isCustom" v-for="(col, colIndx) in columns" :key="colIndx">
					{{row[col.key] || ''}}
				</view>
				<view class="rank-item list-col">
					<text :class="row.colorClass">{{row.rankingChangeName || ''}}</text>
					<image :src="row.icon" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import menuBox from "@/wxcomponents/commonLayout/menu";
	import userMixins from '@/libs/userMixins.js'
	import ss from '@/static/ss.png';
	import xj from '@/static/xj.png';
	import bb from '@/static/bb.png';
	export default {
		mixins: [userMixins],
		data() {
			return {
				params: '',
				cardInfos: [
					{
						name: '最高分',
						value: ''
					},
					{
						name: '最低分',
						value: ''
					},
					{
						name: '平均分',
						value: ''
					}
				],
				columns: [
					{
						name: '排名',
						key: 'rank'
					},
					{
						name: '姓名',
						key: 'name'
					},
					{
						name: '分数',
						key: 'score'
					},
					{
						name: '排名变化',
						key: 'rankingChange',
						isCustom: true
					}
				],
				data: []
			}
		},
		methods: {
			calCardInfo(list) {
				let total = 0
				let scores = list.map(item => {
					total += item.score
					return item.score
				});
				let max =  Math.max.apply(null, scores)
				let min = Math.min.apply(null, scores);
				let avg = Number.parseInt((total/ list.length));
				[max, min, avg].map((score, index) => {
					this.cardInfos[index].value = score;
				})
			},
			async fetchAchievement() {
				let resp = await this.$http.post({
					url: '/edu/schoolReport/teacher/weChat/studentReport',
					data: this.params
				});
				let list = resp.result
				let icons = [
					{icon: ss, value: 1, colorClass: 'ss'},
					{icon: xj, value: 2, colorClass: 'xj'},
					{icon: bb, value: 3, colorClass: 'bb'},
				]
				list = list.map(item => {
					item.rankingChangeName = this.getDictNameWithCodeAndValue('dict_stu_ranking_change', item.rankingChange);
					let findOne = icons.filter(filterIcon => {
						return filterIcon.value == item.rankingChange
					})[0]
					item.icon = findOne.icon
					item.colorClass = findOne.colorClass; 
					return item;
				})
				this.data = list;
				this.calCardInfo(list);
			},
			toStuDetail(row) {
				this.params.studentNo = row.studentNumber;
				let paramsStr = JSON.stringify(this.params)
				uni.navigateTo({
					url: `/modules/achievement/courseDetail?paramsStr=${paramsStr}`
				})
			}
		},
		onLoad(option) {
			this.params = JSON.parse(option.paramsStr);
			this.fetchAchievement()
		},
		components: {
			menuBox
		}
	}
</script>

<style lang="scss" scoped>
.personalCard {
	display: block;

	image {
		width: 750upx;
		height: 361upx;
		display: block;
	}

	.myInfo {
		width: 690upx;
		height: 281upx;
		padding: 50upx;
		margin: -270upx auto 0 auto;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0upx 2upx 7upx 0upx rgba(0, 0, 0, 0.1);
		border-radius: 8upx;
		position: relative;
	}
	
}
.class-title {
	text-align: center;
	font-size:32upx;
	font-family:Source Han Sans CN;
	font-weight:400;
	color:rgba(51,51,51,1);
}
.class-point {
	padding-top: 60upx;
	display: flex;
	justify-content: space-between;
	text-align: center;
	.point {
		font-size:50upx;
		font-family:DIN;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.desc {
		font-size:28upx;
		font-family:Source Han Sans CN;
		font-weight:400;
		color:rgba(153,153,153,1);
	}
}
.title {
	text-align: center;
	display: flex;
	// justify-content: space-between;
	padding: 20upx 0;
	margin: 0 50upx;
	border-bottom: 1upx solid rgba(204,204,204,1);
	.title-item {
		flex: 1;
		font-size:30upx;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
}

.list {
	padding: 0 50upx;
	text-align: center;
	
	.list-item {
		display: flex;
		padding: 44upx 0;
		border-bottom: 1upx solid rgba(204,204,204,1);
		.list-col {
			flex: 1;
			font-size:30upx;
			font-family:Source Han Sans CN;
			font-weight:400;
			color:rgba(51,51,51,1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.ss {
			color:rgba(32,218,189,1);
		}
		.xj {
			color:rgba(255,83,74,1);
		}
		.bb {
			color:rgba(60,104,229,1);
		}
		image {
			margin-left: 5px;
			width: 30upx;
			height: 30upx;
		}
	}
}
	
</style>
